.related-charts {
    margin-bottom: $vertical-spacing;
}

.related-charts__thumbnails {
    // refactor: merge with KeyInsights.css
    @include md-up {
        height: 575px;
        overflow-y: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);

        // Making space for border shadow
        margin-left: -16px;
        padding-left: 16px;

        // This does frees enough space for the top border shadow, but it also
        // makes the thumbnails scroll past the top border of the chart, and
        // into the block title's space. Commenting out for now until we can
        // have our cake and eat it.

        //padding-top: 16px;
        //margin-top: -16px;

        // Shifting margin to padding to make space for scrollbar
        margin-right: -16px;
        padding-right: 16px;
    }
}

// Increasing specificity without nesting, to override the specificity of
// .article-content ul when related charts blocks are embedded in Wordpress
// articles
.related-charts__list.related-charts__list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 3rem;

    @include md-down {
        display: flex;
        overflow-x: auto;

        // Making space for border shadow
        margin-left: -16px;
        padding-left: 16px;
        padding-top: 16px;
        margin-top: -16px;

        // making space for the scrollbar
        margin-bottom: $vertical-spacing * 0.5;
        padding-bottom: 1.5rem;

        li {
            flex: 0 0 min(50vw, 13rem);
            margin-right: 1rem;
        }
    }

    @include md-up {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: $vertical-spacing;

        // Hack to work around the top border shadow being cropped for the first
        // two thumbnails. See also unsatisfactory solution above.
        li {
            &:nth-child(1),
            &:nth-child(2) {
                border-top: 1px solid rgba(0, 0, 0, 0.001);
            }
        }
    }

    li.active {
        pointer-events: none;

        img {
            border: 1px solid $oxford-blue;
        }

        a {
            text-decoration: none;
        }
    }

    img {
        @include image-shadow;
        margin-bottom: $vertical-spacing * 0.5;
        border: 1px solid transparent;
        width: 100%;
    }

    a {
        @include owid-link-90;
    }

    a:hover img {
        @include image-hover;
    }

    font-size: 14px;
    line-height: 1.2;
}

.related-charts__chart {
    .related-charts__figure {
        height: $grapher-height;
        margin-bottom: 1rem;
    }

    figure {
        @include figure-grapher-reset;
        margin-bottom: 0;
    }

    .gallery-navigation {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 0;
    }
}
